﻿<template>
	<div>
		<div>
			<button @click='dyaddchart1'>动态添加bar</button>
			<button @click='dyaddchart2'>动态添加line</button>
			修改chart类型：
			<select v-model="options.type">
				<option value="line">line</option>
				<option value="bar">原始</option>
				<option value="pie">pie</option>
				<option value="ring">ring</option>
			</select>
			修改高度：
			<select v-model="options.style.height">
				<option value="400px">原始</option>
				<option value="300px">300</option>
				<option value="600px">600</option>
			</select>
			修改数据：
			<input v-model.number="options.datasets[0].data[0]" />
		</div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart :options="options"></simple-chart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart :options="options2"></simple-chart>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart :options="options3"></simple-chart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart :options="options4"></simple-chart>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<div id='dy1'></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<div id='dy2'></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	module.exports = {
		methods: {
			dyaddchart1() {
				var ops = {
					type: "bar",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "300px" }
				};
				SimpleChart.show("#dy1", ops);
			},
			dyaddchart2() {
				var ops = {
					type: "line",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "600px" }
				};

				SimpleChart.show("#dy2", ops);
			},
		},
		data() {
			return {
				options: {
					type: "bar",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "400px" ,width:"100%"}
				},
				options2: {
					type: "line",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "400px" }
				},
				options3: {
					type: "pie",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "400px" }
				},
				options4: {
					type: "ring",
					title: {
						text: "最近一周各品类销售图",
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230],
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160],
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120],
						},
					],
					style: { height: "400px" }
				},
			};
		},
	}
</script>